/**
 * button group
 */
.btn-group {
  .inline-block();
  position: relative;
  font-size: 0; // remove as part 1 of font-size inline-block hack
  white-space: nowrap;
  vertical-align: middle; // match .btn alignment given font-size hack above
  white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
  .ie7-restore-left-whitespace();
  zoom: 1;
  // btn
  .btn {
    position: relative;
    float: left;
    margin-right: -1px;
  }

  // On hover/focus/active, bring the proper btn to front
  .btn:hover, .btn:focus, .btn:active, .btn.active {
    z-index: 2;
  }

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
// Optional: Group multiple button groups together for a toolbar
.btn-groups {
  .inline-block();
  font-size: 0; // Hack to remove whitespace that results from using inline-block
  white-space: nowrap;
  .btn-group {
    margin-right: @componentPadding * 2;
  }
}
.btn-group > .btn:last-child {
  margin-right: 0px;
}
.btn-groups > .btn-group:last-child {
  margin-right: 0px;
}